
<template>
    <div class="container" :style="{minHeight: screenHeight}">
      <div class="option-box">
        <div class="item-box">
          <p>真实姓名</p>
          <input type="text" v-model="username" placeholder="请输入真实姓名" placeholder-style="font-size:28rpx;color:#CCCCCC;">
        </div>
        <div class="item-box">
          <p>联系电话</p>
          <input type="text" v-model="phone" placeholder="请输入联系电话" placeholder-style="font-size:28rpx;color:#CCCCCC;">
        </div>
        <div class="item-box">
          <p>训练年限</p>
          <input type="text" v-model="year" placeholder="请输入健身训练年限" placeholder-style="font-size:28rpx;color:#CCCCCC;">
        </div>
        <div class="item-box">
          <p>年龄</p>
          <input type="text" v-model="age" placeholder="请输入年龄" placeholder-style="font-size:28rpx;color:#CCCCCC;">
        </div>
        <div class="item-box">
          <p>身高(cm)</p>
          <input type="text" v-model="stature" placeholder="请输入身高" placeholder-style="font-size:28rpx;color:#CCCCCC;">
        </div>
        <div class="item-box">
          <p>体重(KG)</p>
          <input type="number" v-model="weight" placeholder="请输入体重" placeholder-style="font-size:28rpx;color:#CCCCCC;">
        </div>
        <div class="item-box">
          <p>性别</p>
          <input type="text" v-model="sex" placeholder="请输入性别" placeholder-style="font-size:28rpx;color:#CCCCCC;">
        </div>
      </div>
      <div class="sure-btn" @click="fnSure">
        <p>完成</p>
      </div>
      <i-message id="message" />
    </div>
</template>
<script>
  const { $Message } = require('../../../static/iview/base/index');
  export default {
        data(){
            return {
              screenHeight: (Number(wx.getSystemInfoSync().windowHeight)) + 'px',
              username:'',
              phone:'',
              year:'',
              age:'',
              stature:'',
              weight:'',
              sex:''
            }
        },
    methods:{
      fnSure(){
          if(!this.username){
            $Message({
              content: '请输入真实姓名',
              type: 'error'
            });
            return false;
          }
          if(!/^1(3|4|5|7|8|9)\d{9}$/.test(this.phone)){
            $Message({
              content: '请输入正确的联系电话',
              type: 'error'
            });
            return false;
          }
        if(!this.year){
          $Message({
            content: '请输入健身训练年限',
            type: 'error'
          });
          return false;
        }
        if(!this.age){
          $Message({
            content: '请输入年龄',
            type: 'error'
          });
          return false;
        }
        if(!this.stature){
          $Message({
            content: '请输入身高',
            type: 'error'
          });
          return false;
        }
        if(!this.weight){
          $Message({
            content: '请输入体重',
            type: 'error'
          });
          return false;
        }
        if(!this.sex){
          $Message({
            content: '请输入性别',
            type: 'error'
          });
          return false;
        }
        if(this.sex != '男' && this.sex !='女'){
          $Message({
            content: '性别只能为男或女',
            type: 'error'
          });
          return false;
        }
        let gender = '';
        if(this.sex == '男'){
          gender = 1
        } else {
          gender = 0
        }
        this.$httpWX.post({
          url: '/user/perfectUserInfo',
          data: {
            name:this.username,
            age:this.age,
            height:this.stature,
            weight:this.weight,
            trainingYears:this.year,
            phone:this.phone,
            gender:gender
          }
        }).then(res => {
          if(res.code == 0){
            $Message({
              content: '保存成功！',
              type: 'success'
            });
            setTimeout(function () {
              wx.switchTab({
                url: '../mine/main'
              })
            },2000)
          }
        });
      }
    },
    mounted(){
      let userInfo = wx.getStorageSync('userInfo');
      this.$httpWX.get({
        url: '/user/getUserById',
        data: {
            id: userInfo.id
        }
      }).then(res => {
        if(res.code == 0){
            this.username = res.data.name;
            this.phone = res.data.phone;
            this.year = res.data.trainingYears;
            this.age = res.data.age;
            this.stature = res.data.height;
            this.weight = res.data.weight;
            if(res.data.gender == 1){
              this.sex = '男'
            } else {
              this.sex = '女'
            }
        }
      });
    }
  }
</script>

<style>
  .container{
    width: 100%;
    background-color: #F7F7F7;
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
  }
  .option-box{
    background-color: white;
  }
  .item-box{
    width: 95%;
    height: 107rpx;
    margin: 0 auto;
    border-bottom: 1rpx solid #EEEEEE;
    box-sizing: border-box;
    display: flex;
    align-items: center;
  }
  .item-box>p{
    width: 200rpx;
    height: 55rpx;
    font-size: 30rpx;
    color: #282828;
    margin-right: 45rpx;
    line-height: 55rpx;
    text-align: center;
  }
  .item-box>input{
    flex: 1;
    font-size: 28rpx;
    color: #282828;
  }
  .sure-btn{
    width: 88%;
    height:90rpx;
    background:rgba(36,198,138,1);
    border-radius:10rpx;
    margin: 40rpx auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .sure-btn>p{
    font-size: 30rpx;
    font-weight: 400;
    color: white;
  }
</style>
